<template lang="pug">
  Modal.lzw-modal-style-1(v-model="diagnoseModal" fullscreen title="2D诊断表")
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150" label-position="left")
      table.table-2d
        tr
          td(colspan="7")
            .ivu-table-cell
              FormItem.mb-0(label="客户名称：")
                b {{customerName}}
          td(colspan="6")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="沟通时间：")
                //- Input(v-model="formValidate.communicateTime" placeholder="请输入" disabled)
                DatePicker(v-model="formValidate.communicateTime" type="date" placeholder="请选择" @on-change="communicateTimeChange")
        tr
          td(colspan="13")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="参与人：")
                Input(v-model="formValidate.participants" disabled)
        tr
          td(rowspan="9" style="width:150px")
            .ivu-table-cell <b>Define</b>
          td(rowspan="4")
            .ivu-table-cell.text-center <i class="red">G</i>oal
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="对象：")
                Input(v-model="formValidate.goalTarget" disabled)
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="时间：")
                //- Input(v-model="formValidate.goalTime" placeholder="请输入" disabled)
                DatePicker(v-model="formValidate.goalTime" type="date" placeholder="请选择" @on-change="goalTimeChange")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="行为目标：")
                Input(v-model="formValidate.goadAction" type="textarea" :rows="3" disabled)
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="结果：")
                Input(v-model="formValidate.goadExpectation" type="textarea" :rows="3" disabled)
        tr
          td(rowspan="4")
            .ivu-table-cell.text-center <i class="red">A</i>ctual<br>situation
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="行为现状：")
                Input(v-model="formValidate.situationStatus" type="textarea" :rows="3" disabled)
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="影响：")
                Input(v-model="formValidate.situationEffect" type="textarea" :rows="3" disabled)
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="利益相关者的想法：")
                Input(v-model="formValidate.situationThought" type="textarea" :rows="3" disabled)
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="竞争对手信息：")
                Input(v-model="formValidate.situationComparison" type="textarea" :rows="3" disabled)
        tr
          td(colspan="1")
            .ivu-table-cell.text-center <i class="red">P</i>ondering
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="基于问题的反思：")
                Input(v-model="formValidate.introspection" type="textarea" :rows="2" disabled)
        tr
          td(rowspan="6")
            .ivu-table-cell <b>Diagnose</b>
          td(rowspan="2")
            .ivu-table-cell.text-center 个人
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="意愿：")
                Input(v-model="formValidate.desire" type="textarea" :rows="2" disabled)
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="能力：")
                Input(v-model="formValidate.ability" type="textarea" :rows="2" disabled)
        tr
          td(rowspan="2")
            .ivu-table-cell.text-center 群体
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="氛围：")
                Input(v-model="formValidate.atmosphere" type="textarea" :rows="2" disabled)
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="文化：")
                Input(v-model="formValidate.culture" type="textarea" :rows="2" disabled)
        tr
          td(rowspan="2")
            .ivu-table-cell.text-center 组织
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="机制：")
                Input(v-model="formValidate.mechanism" type="textarea" :rows="2" disabled)
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="流程：")
                Input(v-model="formValidate.process" type="textarea" :rows="2" disabled)
        tr
          td(rowspan="18")
            .ivu-table-cell <b>Alignment</b>
          td(colspan="6")
            .ivu-table-cell.text-center 双方共识的原因
          td(colspan="6")
            .ivu-table-cell.text-center 可能的干预措施
        template(v-for="item in formValidate.consensuses")
          tr
            td(colspan="6")
              .ivu-table-cell
                Input(v-model="item.consensusSummary")
            td(colspan="6")
              .ivu-table-cell
                Input(v-model="item.action")
        tr
          td(colspan="12")
            .ivu-table-cell.text-center
              Button(type="success" size="small" long @click="addConsensuses") 增加
        tr
          td(colspan="6")
            .ivu-table-cell.text-center KNX行动计划
          td(colspan="6")
            .ivu-table-cell.text-center 客户行动计划
        template(v-for="item in formValidate.coordinationPlans")
          tr
            td(colspan="6")
              .ivu-table-cell
                Input(v-model="item.action")
            td(colspan="6")
              .ivu-table-cell
                Input(v-model="item.customerAction")
        tr
          td(colspan="12")
            .ivu-table-cell.text-center
              Button(type="success" size="small" long @click="addCoordinationPlans") 增加
    template(slot="footer")
        //- Button(type="info" :loading="btnLoading" :disabled="btnLoading" @click="") 修改
        //- Button(type="info" :loading="btnLoading" :disabled="btnLoading" @click="handleSubmit('formValidate')") 保存
        Button(@click="cancel") 关闭
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'

export default {
  props: {
    requirementId: String,
    customerName: String
  },
  data () {
    return {
      diagnoseModal: false,
      btnLoading: false,
      formValidate: {
        // communicateTime: '', // 沟通时间
        // participants: '', // 参与人
        // goalTarget: '', // 对象
        // goadAction: '', // 行为目标
        // goadExpectation: '', // 结果
        // situationStatus: '', // 行为现状
        // situationEffect: '', // 影响
        // situationThought: '', // 利益者的相关想法
        // situationComparison: '', // 竞争对手信息
        // introspection: '', // 基于问题的反思
        // desire: '', // 意愿
        // ability: '', // 能力
        // atmosphere: '', // 氛围
        // culture: '', // 文化
        // mechanism: '', // 机制
        // process: '', // 流程
        // consensuses: [
        //   {
        //     consensusSummary: '', // 共识
        //     action: '' // 采取的行动
        //   }
        // ],
        // CoordinationPlans: [
        //   {
        //     action: '', // KNX行动计划
        //     customerAction: '' // 客户行动计划
        //   }
        // ]
      },
      ruleValidate: {
        name: [
          { required: true, message: '', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    requirementId (newValue, oldValue) {
      this.get2DDiagnoseInfo()
    }
  },
  methods: {
    // 获取2d诊断表
    get2DDiagnoseInfo () {
      HRDCCustomerApi.Get2DDiagnoseInfo({
        requirementId: this.requirementId
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.formValidate = res.data.data
        } else {
          this.formValidate = {}
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    modalOpen () {
      this.diagnoseModal = true
    },
    handleSubmit () {
      HRDCCustomerApi.Post2DDiagnoseInfo(Object.assign({ requirementId: this.requirementId }, this.formValidate)).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.cancel()
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    cancel () {
      this.diagnoseModal = false
      this.$emit('close-modal', false)
    },
    addConsensuses () {
      this.formValidate.consensuses.push({
        consensusSummary: '', // 共识
        action: '' // 采取的行动
      })
    },
    addCoordinationPlans () {
      this.formValidate.coordinationPlans.push({
        action: '', // KNX行动计划
        customerAction: '' // 客户行动计划
      })
    },
    communicateTimeChange (val) {
      this.formValidate.communicateTime = val
    },
    goalTimeChange (val) {
      this.formValidate.goalTime = val
    }
  }
}
</script>
<style lang="less">
  .table-2d{
    .ivu-input[disabled]{
      background-color: #fff;
      opacity: 1;
      cursor: auto;
      color: #333;
    }
  }
</style>

<style lang="less" scoped>
  .table-2d{
    width: 100%;
    border: 1px solid #e8eaec;
    border-collapse: collapse;
    tr{
      width: 100%;
    }
    td{
      // width: 200px;
      padding: 0;
      // min-width: 0;
      // height: 48px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      vertical-align: middle;
      border-right: 1px solid #e8eaec;
      border-bottom: 1px solid #e8eaec;
      .ivu-table-cell{
        padding: 5px 18px;
        overflow: inherit;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        box-sizing: border-box;
        .red{
          color: red;
        }
      }
    }
  }
</style>
